<template>
  <div>
    <el-dialog
      top="8vh"
      width="90%"
      :title="title"
      :show-close="true"
      :lock-scroll="true"
      :append-to-body="false"
      :destroy-on-close="true"
      :visible.sync="data_visible"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @closed="dialogDestroy"
    >
      <div class="main">
        <div class="query-form">
          <el-form ref="queryForm" :inline="true" :model="data_query_form.data">
            <el-form-item label="工具编码：" prop="number">
              <el-input v-model="data_query_form.data.number" type="text" placeholder="工具编码" />
            </el-form-item>
            <el-form-item label="工具名称：" prop="name">
              <el-input v-model="data_query_form.data.name" type="text" placeholder="工具名称" />
            </el-form-item>
            <el-form-item label="工具是否套装：" prop="is_outfit">
              <el-radio v-model="data_query_form.data.is_outfit" :label="true">
                是
              </el-radio>
              <el-radio v-model="data_query_form.data.is_outfit" :label="false">
                否
              </el-radio>
            </el-form-item>
            <el-form-item>
              <el-button @click="queryFormReset">
                重置
              </el-button>
              <el-button type="primary" @click="queryFormQuery">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="tool-list">
          <el-table
            border
            style="width: 100%"
            max-height="300"
            :data="data_tool_list.data"
            :highlight-current-row="false"
            @selection-change="toolListSelectionChange"
          >
            <el-table-column
              v-for="(item, index) in data_tool_list.columns"
              :key="index"
              align="center"
              header-align="center"
              :type="item.type"
              :prop="item.prop"
              :label="item.label"
            />
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              hide-on-single-page
              layout="prev, pager, next, sizes, jumper"
              :total="data_tool_list.pagination.total"
              :page-size="data_tool_list.pagination.page_size"
              @current-change="toolListPaginationChange"
            />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">
          取 消
        </el-button>
        <el-button type="primary" :disabled="data_tool_list.ext_data.selected.length === 0" @click="dialogConfirm">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ApiMMallWeb } from '@services/api';

export default {
  name: 'ToolAddDialogComponent',
  props: {
    title: {
      type: String,
      default: '添加产品'
    },
    query: {
      type: Object,
      default: function() {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    fetcher: {
      type: Function,
      default: function() {}
    }
  },
  data() {
    return {
      data_query_form: {
        data: {
          name: '',
          number: '',
          is_outfit: true
        },
        ext_data: {
          name: '',
          number: '',
          is_outfit: true
        }
      },
      data_tool_list: {
        data: [],
        columns: [
          {
            type: 'selection'
          },
          {
            prop: 'number',
            label: '工具编码'
          },
          {
            prop: 'name',
            label: '工具名称'
          },
          {
            prop: 'unit',
            label: '单位'
          },
          {
            prop: 'outfit',
            label: '套装'
          }
        ],
        pagination: {
          total: 0,
          page_size: 0
        },
        ext_data: {
          selected: []
        }
      },
      data_visible: true
    };
  },
  computed: {
    apiMMallWeb: function() {
      return new ApiMMallWeb(this.fetcher);
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler: function(val, oldVal) {
        this.data_visible = val;
      }
    }
  },
  async created() {
    const result = await this.getProductListV1Api();
    this.data_tool_list.data = result.content;
    this.data_tool_list.pagination.total = result.totalElements;
    this.data_tool_list.pagination.page_size = result.size;
  },
  methods: {
    dialogDestroy() {
      this.$emit('destroy', true);
      this.$emit('update:visible', false);
    },
    dialogClose() {
      this.data_visible = false;
    },
    dialogConfirm() {
      this.$emit('confirm', this.data_tool_list.ext_data.selected);
      this.data_visible = false;
    },
    queryFormReset() {
      this.$refs['queryForm'].resetFields();
    },
    queryFormQuery() {
      this.data_query_form.ext_data.name = this.data_query_form.data.name;
      this.data_query_form.ext_data.number = this.data_query_form.data.number;
      this.data_query_form.ext_data.is_outfit = this.data_query_form.data.is_outfit;
    },
    toolListSelectionChange(selectedData) {
      this.data_tool_list.ext_data.selected = selectedData;
    },
    toolListPaginationChange(currentIndex) {
      // console.log(currentIndex);
    },
    pullToolListData({ page, pageSize } = {}) {
      // eslint-disable-next-line no-param-reassign
      page || (page = 1);
      // eslint-disable-next-line no-param-reassign
      pageSize || (pageSize = 10);
      const query = this.query;
      return this.apiMMallWeb.NotChosenOrderOrderV1ApiPOST({
        query: {
          orderId: query.orderId,
          page: page,
          pageSize: pageSize,
          toolCode: this.data_query_form.ext_data.number,
          toolCodeList: [],
          toolName: this.data_query_form.ext_data.name,
          toolSuit: this.data_query_form.ext_data.is_outfit
        }
      });
    },
    async getProductListV1Api(pager, params) {
      let result = await new Promise((resolve, reject) => {
        resolve({
          payload: {
            content: [
              {
                number: '12345679',
                name: '王小虎',
                unit: '套',
                outfit: '是'
              },
              {
                number: '12345679',
                name: '王小虎',
                unit: '套',
                outfit: '是'
              },
              {
                number: '12345679',
                name: '王小虎',
                unit: '套',
                outfit: '是'
              },
              {
                number: '12345679',
                name: '王小虎',
                unit: '套',
                outfit: '是'
              },
              {
                number: '12345679',
                name: '王小虎',
                unit: '套',
                outfit: '是'
              },
              {
                number: '12345679',
                name: '王小虎',
                unit: '套',
                outfit: '是'
              },
              {
                number: '12345679',
                name: '王小虎',
                unit: '套',
                outfit: '是'
              },
              {
                number: '12345679',
                name: '王小虎',
                unit: '套',
                outfit: '是'
              },
              {
                number: '12345679',
                name: '王小虎',
                unit: '套',
                outfit: '是'
              },
              {
                number: '12345679',
                name: '王小虎',
                unit: '套',
                outfit: '是'
              }
            ],
            number: 1,
            size: 20,
            totalPages: 2,
            totalElements: 24,
            numberOfElements: 20
          },
          code: '0',
          msg: 'ok'
        });
      });
      return result.payload;
    }
  }
};
</script>

<style lang="less" scoped>
.tool-list {
  margin-top: 60px;
  .pagination {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
